<template>
	<view class="container">
		<!-- 页面标题和操作 -->
		<view class="page-header">
			<view class="header-left">
				<text class="page-title">统计分析</text>
				<text v-if="lastUpdateTime" class="update-time">更新于 {{lastUpdateTime}}</text>
			</view>
			<view class="header-actions">
				<button class="export-btn" @click="exportData">
					<text class="export-icon">📊</text>
					导出
				</button>
			</view>
		</view>

		<!-- 时间选择器 -->
		<view class="time-selector">
			<view 
				v-for="(period, index) in timePeriods" 
				:key="index"
				:class="['period-item', selectedPeriod === period.value ? 'active' : '']"
				@click="selectPeriod(period.value)"
			>
				{{period.label}}
			</view>
		</view>

		<!-- 收支总览 -->
		<view class="overview-section">
			<view class="overview-card">
				<view class="overview-header">
					<text class="overview-title">收支总览</text>
					<view v-if="isLoading" class="loading-indicator">
						<text class="loading-text">加载中...</text>
					</view>
				</view>
				<view class="overview-content">
					<view class="overview-item">
						<text class="overview-label">总收入</text>
						<text class="overview-amount income">¥{{totalIncome}}</text>
					</view>
					<view class="overview-item">
						<text class="overview-label">总支出</text>
						<text class="overview-amount expense">¥{{totalExpense}}</text>
					</view>
					<view class="overview-item">
						<text class="overview-label">结余</text>
						<text class="overview-amount balance">¥{{totalBalance}}</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 数据概览 -->
		<view class="overview-section">
			<view class="overview-card">
				<view class="overview-header">
					<text class="overview-title">数据概览</text>
				</view>
				<view class="overview-grid">
					<view class="overview-grid-item">
						<text class="grid-label">记录数量</text>
						<text class="grid-value">{{totalRecords}}</text>
					</view>
					<view class="overview-grid-item">
						<text class="grid-label">平均{{chartType === 'expense' ? '支出' : '收入'}}</text>
						<text class="grid-value">¥{{averageAmount}}</text>
					</view>
					<view class="overview-grid-item">
						<text class="grid-label">最高{{chartType === 'expense' ? '支出' : '收入'}}</text>
						<text class="grid-value">¥{{maxAmount}}</text>
					</view>
					<view class="overview-grid-item">
						<text class="grid-label">分类数量</text>
						<text class="grid-value">{{categoryCount}}</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 收支趋势图 -->
		<view class="trend-section">
			<view class="section-header">
				<text class="section-title">收支趋势</text>
			</view>
			<view class="trend-chart" v-if="trendData.length > 0">
				<view class="chart-container">
					<view class="chart-bars">
						<view 
							v-for="(item, index) in trendData" 
							:key="index"
							class="chart-bar-group"
						>
							<view class="bar-label">{{item.label}}</view>
							<view class="bar-container">
								<view 
									class="income-bar" 
									:style="{height: getBarHeight(item.income, maxAmount) + 'rpx'}"
								></view>
								<view 
									class="expense-bar" 
									:style="{height: getBarHeight(item.expense, maxAmount) + 'rpx'}"
								></view>
							</view>
							<view class="bar-amounts">
								<text class="income-amount">¥{{item.income}}</text>
								<text class="expense-amount">¥{{item.expense}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view v-else class="empty-trend">
				<text class="empty-icon">📊</text>
				<text class="empty-text">暂无趋势数据</text>
				<text class="empty-hint">添加一些记账记录来查看收支趋势</text>
			</view>
		</view>

		<!-- 分类占比 -->
		<view class="category-section">
			<view class="section-header">
				<text class="section-title">分类占比</text>
				<view class="type-tabs">
					<text 
						:class="['type-tab', chartType === 'expense' ? 'active' : '']"
						@click="switchChartType('expense')"
					>支出</text>
					<text 
						:class="['type-tab', chartType === 'income' ? 'active' : '']"
						@click="switchChartType('income')"
					>收入</text>
				</view>
			</view>
			<view class="pie-chart">
				<!-- 饼图可视化 -->
				<view class="pie-chart-container" v-if="currentChartData.length > 0">
					<view class="pie-chart-wrapper">
						<view 
							v-for="(category, index) in currentChartData" 
							:key="index"
							class="pie-slice"
							:style="getPieSliceStyle(category, index)"
						></view>
					</view>
					<view class="pie-center">
						<text class="pie-total">¥{{getTotalAmount()}}</text>
						<text class="pie-label">{{chartType === 'expense' ? '总支出' : '总收入'}}</text>
					</view>
				</view>
				
				<view class="chart-legend" v-if="currentChartData.length > 0">
					<view 
						v-for="(category, index) in currentChartData" 
						:key="index"
						class="legend-item"
					>
						<view class="legend-color" :style="{backgroundColor: category.color}"></view>
						<text class="legend-name">{{category.name}}</text>
						<text class="legend-percentage">{{category.percentage}}%</text>
					</view>
				</view>
				<view v-else class="empty-chart">
					<text class="empty-icon">📊</text>
					<text class="empty-text">暂无{{chartType === 'expense' ? '支出' : '收入'}}数据</text>
					<text class="empty-hint">添加一些{{chartType === 'expense' ? '支出' : '收入'}}记录来查看分类占比</text>
				</view>
			</view>
		</view>

		<!-- 排行榜 -->
		<view class="ranking-section">
			<view class="section-header">
				<text class="section-title">{{chartType === 'expense' ? '支出' : '收入'}}排行榜</text>
			</view>
			<view class="ranking-list" v-if="currentChartData.length > 0">
				<view 
					v-for="(item, index) in currentChartData" 
					:key="index"
					class="ranking-item"
				>
					<view class="ranking-number">{{index + 1}}</view>
					<view class="ranking-info">
						<text class="ranking-name">{{item.name}}</text>
						<text class="ranking-amount">¥{{item.amount}}</text>
					</view>
					<view class="ranking-bar">
						<view 
							class="ranking-fill" 
							:style="{width: item.percentage + '%', backgroundColor: item.color}"
						></view>
					</view>
				</view>
			</view>
			<view v-else class="empty-ranking">
				<text class="empty-icon">🏆</text>
				<text class="empty-text">暂无{{chartType === 'expense' ? '支出' : '收入'}}数据</text>
				<text class="empty-hint">添加一些{{chartType === 'expense' ? '支出' : '收入'}}记录来查看排行榜</text>
			</view>
		</view>

		<!-- 快速添加按钮 -->
		<view class="fab-button" @click="goToAdd">
			<text class="fab-icon">+</text>
		</view>
	</view>
</template>

<script>
	import { recordAPI, categoryAPI, apiUtils } from '@/utils/api.js'
	import { formatTime } from '@/utils/index.js'
	import themeManager from '@/utils/theme.js' // 引入主题管理器
	
	export default {
		data() {
			return {
				selectedPeriod: 'month',
				timePeriods: [
					{ label: '周', value: 'week' },
					{ label: '月', value: 'month' },
					{ label: '年', value: 'year' }
				],
				chartType: 'expense',
				totalIncome: 0,
				totalExpense: 0,
				totalBalance: 0,
				trendData: [],
				expenseChartData: [],
				incomeChartData: [],
				maxAmount: 0,
				currentDate: new Date(),
				isLoading: false,
				lastUpdateTime: null, // 新增：最后更新时间
				totalRecords: 0, // 新增：总记录数
				averageAmount: 0, // 新增：平均金额
				categoryCount: 0 // 新增：分类数量
			}
		},
		computed: {
			currentChartData() {
				return this.chartType === 'expense' ? this.expenseChartData : this.incomeChartData
			}
		},
		onLoad() {
			if (!apiUtils.isLoggedIn()) {
				uni.reLaunch({
					url: '/pages/login/login'
				});
				return;
			}
			this.loadData()
		},
		onShow() {
			this.loadData()
		},
		methods: {
			async loadData() {
				if (this.isLoading) return
				this.isLoading = true
				
				try {
					// 获取日期范围
					const { startDate, endDate } = this.getDateRange()
					// 调用后端API获取统计数据
					const statistics = await recordAPI.getStatistics(startDate, endDate)
					// 更新数据
					this.updateStatistics(statistics)
					// 更新最后更新时间
					this.lastUpdateTime = this.formatUpdateTime(new Date())
				} catch (error) {
					console.error('加载数据失败:', error)
					uni.showToast({
						title: error.message || '加载数据失败',
						icon: 'none'
					})
				} finally {
					this.isLoading = false
				}
			},
			selectPeriod(period) {
				this.selectedPeriod = period
				this.loadData()
			},
			switchChartType(type) {
				this.chartType = type
			},
			// 获取日期范围
			getDateRange() {
				const now = new Date()
				let startDate, endDate
				
				if (this.selectedPeriod === 'week') {
					// 本周
					startDate = new Date(now)
					startDate.setDate(now.getDate() - now.getDay())
					endDate = new Date(now)
					endDate.setDate(now.getDate() + (6 - now.getDay()))
				} else if (this.selectedPeriod === 'month') {
					// 本月
					startDate = new Date(now.getFullYear(), now.getMonth(), 1)
					endDate = new Date(now.getFullYear(), now.getMonth() + 1, 0)
				} else if (this.selectedPeriod === 'year') {
					// 本年
					startDate = new Date(now.getFullYear(), 0, 1)
					endDate = new Date(now.getFullYear(), 11, 31)
				}
				
				return {
					startDate: this.formatDateForAPI(startDate),
					endDate: this.formatDateForAPI(endDate)
				}
			},
			
			// 格式化日期为API格式 (YYYY-MM-DD)
			formatDateForAPI(date) {
				const year = date.getFullYear()
				const month = String(date.getMonth() + 1).padStart(2, '0')
				const day = String(date.getDate()).padStart(2, '0')
				return `${year}-${month}-${day}`
			},
			
			// 更新统计数据
			updateStatistics(statistics) {
				// 更新概览数据
				if (statistics.overview) {
					this.totalIncome = statistics.overview.totalIncome.toFixed(2)
					this.totalExpense = statistics.overview.totalExpense.toFixed(2)
					this.totalBalance = statistics.overview.balance.toFixed(2)
					this.totalRecords = statistics.overview.totalRecords
					this.averageAmount = statistics.overview.averageAmount.toFixed(2)
					this.maxAmount = statistics.overview.maxAmount.toFixed(2)
					this.categoryCount = statistics.overview.categoryCount
				}
				
				// 更新趋势数据
				if (statistics.trend) {
					this.trendData = statistics.trend.map(item => ({
						label: item.date,
						income: item.income,
						expense: item.expense
					}))
				}
				
				// 更新分类统计
				if (statistics.categoryStats) {
					this.expenseChartData = statistics.categoryStats.map(item => ({
						name: item.categoryName,
						amount: item.amount,
						percentage: item.percentage,
						color: item.color,
						icon: item.categoryIcon
					}))
				}
				
				// 更新排行榜
				if (statistics.ranking) {
					this.rankingData = statistics.ranking.map(item => ({
						name: item.categoryName,
						amount: item.amount,
						rank: item.rank,
						icon: item.categoryIcon
					}))
				}
			},
			loadTrendData() {
				const now = new Date()
				let trendData = []
				
				if (this.selectedPeriod === 'week') {
					// 本周趋势
					for (let i = 0; i < 7; i++) {
						const date = new Date(now)
						date.setDate(now.getDate() - now.getDay() + i)
						const dateStr = this.formatDateForStorage(date)
						
						const dayRecords = getRecordsByDateRange(dateStr, dateStr)
						const dayStats = calculateStats(dayRecords)
						
						trendData.push({
							label: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'][i],
							income: dayStats.totalIncome,
							expense: dayStats.totalExpense
						})
					}
				} else if (this.selectedPeriod === 'month') {
					// 本月趋势（按周分组）
					const weeksInMonth = Math.ceil(now.getDate() / 7)
					for (let i = 0; i < weeksInMonth; i++) {
						const startDate = new Date(now.getFullYear(), now.getMonth(), i * 7 + 1)
						const endDate = new Date(now.getFullYear(), now.getMonth(), Math.min((i + 1) * 7, now.getDate()))
						
						const weekRecords = getRecordsByDateRange(
							this.formatDateForStorage(startDate),
							this.formatDateForStorage(endDate)
						)
						const weekStats = calculateStats(weekRecords)
						
						trendData.push({
							label: `第${i + 1}周`,
							income: weekStats.totalIncome,
							expense: weekStats.totalExpense
						})
					}
				} else if (this.selectedPeriod === 'year') {
					// 本年趋势（按月分组）
					for (let i = 0; i < 12; i++) {
						const monthRecords = getRecordsByMonth(now.getFullYear(), i + 1)
						const monthStats = calculateStats(monthRecords)
						
						trendData.push({
							label: `${i + 1}月`,
							income: monthStats.totalIncome,
							expense: monthStats.totalExpense
						})
					}
				}
				
				this.trendData = trendData
				this.maxAmount = Math.max(
					...trendData.map(item => Math.max(item.income, item.expense))
				)
			},
			loadChartData() {
				let records = []
				const now = new Date()
				
				if (this.selectedPeriod === 'week') {
					const startOfWeek = new Date(now)
					startOfWeek.setDate(now.getDate() - now.getDay())
					const endOfWeek = new Date(now)
					endOfWeek.setDate(now.getDate() + (6 - now.getDay()))
					
					records = getRecordsByDateRange(
						this.formatDateForStorage(startOfWeek),
						this.formatDateForStorage(endOfWeek)
					)
				} else if (this.selectedPeriod === 'month') {
					records = getRecordsByMonth(now.getFullYear(), now.getMonth() + 1)
				} else if (this.selectedPeriod === 'year') {
					const startOfYear = new Date(now.getFullYear(), 0, 1)
					const endOfYear = new Date(now.getFullYear(), 11, 31)
					
					records = getRecordsByDateRange(
						this.formatDateForStorage(startOfYear),
						this.formatDateForStorage(endOfYear)
					)
				}
				
				// 生成支出分类数据
				const expenseRecords = records.filter(record => record.type === 'expense')
				this.expenseChartData = this.generateChartData(expenseRecords, 'expense')
				
				// 生成收入分类数据
				const incomeRecords = records.filter(record => record.type === 'income')
				this.incomeChartData = this.generateChartData(incomeRecords, 'income')
			},
			generateChartData(records, type) {
				if (records.length === 0) return []
				
				// 按分类统计
				const categoryMap = {}
				records.forEach(record => {
					if (!categoryMap[record.category]) {
						categoryMap[record.category] = 0
					}
					categoryMap[record.category] += record.amount
				})
				
				// 计算总金额
				const totalAmount = Object.values(categoryMap).reduce((sum, amount) => sum + amount, 0)
				
				// 生成颜色数组 - 使用主题颜色
				const theme = this.$themeManager ? this.$themeManager.getCurrentTheme() : { colors: {} }
				const colors = [
					theme.colors.error || '#E74C3C',
					theme.colors.info || '#3498DB', 
					theme.colors.primary || '#7ED321',
					theme.colors.success || '#27AE60',
					theme.colors.warning || '#F39C12',
					theme.colors.accent || '#FF8FA3',
					theme.colors.primaryLight || '#8EE53A',
					theme.colors.accentLight || '#FFA8B8'
				]
				
				// 转换为图表数据格式
				return Object.entries(categoryMap)
					.map(([name, amount], index) => ({
						name,
						amount: amount.toFixed(2),
						percentage: Math.round((amount / totalAmount) * 100),
						color: colors[index % colors.length]
					}))
					.sort((a, b) => b.amount - a.amount)
			},
			formatDateForStorage(date) {
				const year = date.getFullYear()
				const month = String(date.getMonth() + 1).padStart(2, '0')
				const day = String(date.getDate()).padStart(2, '0')
				return `${year}-${month}-${day}`
			},
			formatUpdateTime(date) {
				const now = new Date()
				const diffMinutes = Math.floor((now - date) / (1000 * 60))
				
				if (diffMinutes < 1) {
					return '刚刚'
				} else if (diffMinutes < 60) {
					return `${diffMinutes}分钟前`
				} else if (diffMinutes < 1440) { // 24小时
					const hours = Math.floor(diffMinutes / 60)
					return `${hours}小时前`
				} else {
					const year = date.getFullYear()
					const month = String(date.getMonth() + 1).padStart(2, '0')
					const day = String(date.getDate()).padStart(2, '0')
					const hours = String(date.getHours()).padStart(2, '0')
					const minutes = String(date.getMinutes()).padStart(2, '0')
					return `${year}-${month}-${day} ${hours}:${minutes}`
				}
			},
			getBarHeight(amount, maxAmount) {
				if (maxAmount === 0) return 0
				return Math.max((amount / maxAmount) * 200, 20) // 最小高度20rpx
			},
			getTotalAmount() {
				return this.chartType === 'expense' ? this.totalExpense : this.totalIncome
			},
			getPieSliceStyle(category, index) {
				const total = this.currentChartData.length
				const anglePerSlice = 360 / total
				const startAngle = index * anglePerSlice
				const endAngle = (index + 1) * anglePerSlice
				
				// 使用CSS conic-gradient创建饼图切片
				const startPercent = (startAngle / 360) * 100
				const endPercent = (endAngle / 360) * 100
				
				return {
					background: `conic-gradient(from ${startAngle}deg, ${category.color} 0deg, ${category.color} ${endAngle}deg, transparent ${endAngle}deg)`,
					transform: `rotate(${startAngle}deg)`,
					zIndex: total - index // 确保后面的切片在上层
				}
			},
			exportData() {
				const data = {
					period: this.selectedPeriod,
					totalIncome: this.totalIncome,
					totalExpense: this.totalExpense,
					totalBalance: this.totalBalance,
					trendData: this.trendData,
					expenseChartData: this.expenseChartData,
					incomeChartData: this.incomeChartData,
					chartType: this.chartType
				}
				uni.showModal({
					title: '导出数据',
					content: '确定要导出当前统计数据吗？',
					success: (res) => {
						if (res.confirm) {
							uni.setClipboardData({
								data: JSON.stringify(data),
								success: function () {
									uni.showToast({
										title: '数据已复制到剪贴板',
										icon: 'none'
									})
								},
								fail: function () {
									uni.showToast({
										title: '复制失败',
										icon: 'none'
									})
								}
							})
						}
					}
				})
			},
			goToAdd() {
				this.$emit('show-modal')
			}
		}
	}
</script>

<style lang="scss">
	@import '../../uni.scss';
	
	.container {
		background: $cute-gradient-bg;
		min-height: 100vh;
		padding: 0;
		padding-top: var(--status-bar-height);
		padding-bottom: 120rpx; /* 为底部导航栏预留空间 */
		position: relative;
	}

	/* 页面标题和操作 */
	.page-header {
		background: $cute-gradient-primary;
		padding: 40rpx 30rpx;
		color: $cute-text-inverse;
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: relative;
		overflow: hidden;
		border-radius: 0 0 40rpx 40rpx;
		
		&::before {
			content: '';
			position: absolute;
			top: -50%;
			right: -20%;
			width: 200rpx;
			height: 200rpx;
			background: rgba(255, 255, 255, 0.15);
			border-radius: 50%;
			animation: float 6s ease-in-out infinite;
		}
		
		&::after {
			content: '';
			position: absolute;
			bottom: -30%;
			left: -10%;
			width: 150rpx;
			height: 150rpx;
			background: rgba(255, 182, 193, 0.15);
			border-radius: 50%;
			animation: float 8s ease-in-out infinite reverse;
		}
	}

	@keyframes float {
		0%, 100% { transform: translateY(0px) rotate(0deg); }
		50% { transform: translateY(-20px) rotate(180deg); }
	}

	.header-left {
		position: relative;
		z-index: 1;
	}

	.page-title {
		font-size: 48rpx;
		font-weight: bold;
		display: block;
		margin-bottom: 10rpx;
	}

	.update-time {
		font-size: 24rpx;
		opacity: 0.8;
	}

	.header-actions {
		position: relative;
		z-index: 1;
	}

	.export-btn {
		background: $cute-gradient-accent;
		color: $cute-text-inverse;
		border: none;
		border-radius: $cute-border-radius;
		padding: 20rpx 30rpx;
		font-size: 28rpx;
		font-weight: 600;
		box-shadow: $cute-button-shadow;
		transition: $cute-transition;
		display: flex;
		align-items: center;
		position: relative;
		overflow: hidden;
		
		&::before {
			content: '';
			position: absolute;
			top: 0;
			left: -100%;
			width: 100%;
			height: 100%;
			background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
			transition: left 0.5s;
		}
		
		&:active {
			transform: $cute-active-transform;
			box-shadow: 0 4rpx 16rpx rgba(255, 182, 193, 0.4);
			
			&::before {
				left: 100%;
			}
		}
	}

	.export-icon {
		margin-right: 10rpx;
		font-size: 24rpx;
	}

	/* 时间选择器 */
	.time-selector {
		display: flex;
		background: $cute-bg-secondary;
		margin: 20rpx;
		border-radius: $cute-border-radius;
		padding: 10rpx;
		box-shadow: $cute-card-shadow;
		border: 2rpx solid $cute-border;
	}

	.period-item {
		flex: 1;
		text-align: center;
		padding: 20rpx 15rpx;
		border-radius: $cute-border-radius;
		font-size: 28rpx;
		color: $cute-text-secondary;
		transition: $cute-transition;
		cursor: pointer;
		position: relative;
		overflow: hidden;
		
		&.active {
			background: $cute-gradient-accent;
			color: $cute-text-inverse;
			box-shadow: $cute-button-shadow;
			transform: $cute-hover-transform;
			
			&::before {
				content: '';
				position: absolute;
				top: 0;
				left: -100%;
				width: 100%;
				height: 100%;
				background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
				animation: shine 1.5s ease-in-out infinite;
			}
		}
		
		&:active {
			transform: $cute-active-transform;
		}
	}

	@keyframes shine {
		0% { left: -100%; }
		100% { left: 100%; }
	}

	/* 收支总览 */
	.overview-section {
		margin: 20rpx;
	}

	.overview-card {
		background: $cute-bg-secondary;
		border-radius: $cute-border-radius;
		padding: 30rpx;
		box-shadow: $cute-card-shadow;
		border: 2rpx solid $cute-border;
		position: relative;
		transition: $cute-transition;
		
		&:hover {
			transform: $cute-hover-transform;
			box-shadow: 0 15rpx 50rpx $cute-shadow-medium;
		}
	}

	.overview-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
	}

	.overview-title {
		font-size: 32rpx;
		font-weight: bold;
		color: $cute-text-primary;
		position: relative;
		
		&::after {
			content: '';
			position: absolute;
			bottom: -8rpx;
			left: 0;
			width: 100%;
			height: 4rpx;
			background: $cute-gradient-accent;
			border-radius: 2rpx;
		}
	}

	.loading-indicator {
		background: rgba(255, 255, 255, 0.9);
		padding: 20rpx 30rpx;
		border-radius: $cute-border-radius;
		backdrop-filter: blur(10rpx);
	}

	.loading-text {
		font-size: 28rpx;
		color: $cute-text-primary;
		font-weight: 600;
	}

	.overview-content {
		display: flex;
		justify-content: space-between;
		gap: 20rpx;
	}

	.overview-item {
		text-align: center;
		flex: 1;
		padding: 25rpx 15rpx;
		background: $cute-bg-primary;
		border-radius: 25rpx;
		border: 2rpx solid $cute-border;
		margin: 0 10rpx;
		transition: $cute-transition;
		
		&:first-child {
			margin-left: 0;
		}
		
		&:last-child {
			margin-right: 0;
		}
		
		&:hover {
			transform: $cute-hover-transform;
			background: $cute-bg-secondary;
			box-shadow: 0 8rpx 25rpx $cute-shadow-light;
		}
	}

	.overview-label {
		display: block;
		font-size: 26rpx;
		color: $cute-text-secondary;
		margin-bottom: 10rpx;
	}

	.overview-amount {
		display: block;
		font-size: 32rpx;
		font-weight: bold;
		
		&.income {
			color: $cute-success;
		}
		
		&.expense {
			color: $cute-error;
		}
		
		&.balance {
			color: $cute-warning;
		}
	}

	.overview-grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 20rpx;
	}

	.overview-grid-item {
		background: $cute-bg-primary;
		padding: 25rpx;
		border-radius: $cute-border-radius;
		border: 2rpx solid $cute-border;
		text-align: center;
		transition: $cute-transition;
		
		&:hover {
			transform: $cute-hover-transform;
			background: $cute-bg-secondary;
		}
	}

	.grid-label {
		display: block;
		font-size: 26rpx;
		color: $cute-text-secondary;
		margin-bottom: 15rpx;
	}

	.grid-value {
		display: block;
		font-size: 36rpx;
		font-weight: bold;
		color: $cute-text-primary;
	}

	/* 收支趋势图 */
	.trend-section {
		background: $cute-bg-secondary;
		margin: 20rpx;
		border-radius: $cute-border-radius;
		padding: 30rpx;
		box-shadow: $cute-card-shadow;
		border: 2rpx solid $cute-border;
	}

	.section-header {
		margin-bottom: 30rpx;
	}

	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		color: $cute-text-primary;
		position: relative;
		
		&::after {
			content: '';
			position: absolute;
			bottom: -8rpx;
			left: 0;
			width: 100%;
			height: 4rpx;
			background: $cute-gradient-accent;
			border-radius: 2rpx;
		}
	}

	.trend-chart {
		/* 趋势图表样式 */
	}

	.chart-bars {
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
		height: 300rpx;
		padding: 20rpx 0;
	}

	.chart-bar-group {
		flex: 1;
		text-align: center;
		margin: 0 10rpx;
	}

	.bar-label {
		font-size: 24rpx;
		color: $cute-text-secondary;
		margin-bottom: 15rpx;
	}

	.bar-container {
		position: relative;
		height: 200rpx;
		display: flex;
		align-items: flex-end;
		justify-content: center;
	}

	.income-bar {
		width: 60%;
		background: linear-gradient(to top, $cute-success, #228B22);
		border-radius: 4rpx 4rpx 0 0;
		transition: height 0.8s ease;
		margin-right: 2rpx;
	}

	.expense-bar {
		width: 60%;
		background: linear-gradient(to top, $cute-error, #B22222);
		border-radius: 4rpx 4rpx 0 0;
		transition: height 0.8s ease;
		margin-left: 2rpx;
	}

	.bar-value {
		position: absolute;
		top: -30rpx;
		font-size: 22rpx;
		color: $cute-text-secondary;
		font-weight: 500;
	}

	/* 分类统计 */
	.category-section {
		background: $cute-bg-secondary;
		margin: 20rpx;
		border-radius: $cute-border-radius;
		padding: 30rpx;
		box-shadow: $cute-card-shadow;
		border: 2rpx solid $cute-border;
	}

	.category-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
	}

	.category-title {
		font-size: 32rpx;
		font-weight: bold;
		color: $cute-text-primary;
	}

	.category-toggle {
		background: $cute-accent;
		color: $cute-text-inverse;
		border: none;
		border-radius: 20rpx;
		padding: 15rpx 25rpx;
		font-size: 24rpx;
		font-weight: 600;
		box-shadow: $cute-button-shadow;
		transition: $cute-transition;
		
		&:active {
			transform: $cute-active-transform;
			box-shadow: 0 4rpx 16rpx rgba(255, 182, 193, 0.4);
		}
	}

	.category-item {
		display: flex;
		align-items: center;
		padding: 25rpx 0;
		border-bottom: 2rpx solid $cute-divider;
		transition: $cute-transition;
		
		&:last-child {
			border-bottom: none;
		}
		
		&:hover {
			background: $cute-bg-tertiary;
			border-radius: 20rpx;
			padding: 25rpx 15rpx;
			margin: 0 -15rpx;
			transform: $cute-hover-transform;
		}
	}

	.category-icon {
		width: 80rpx;
		height: 80rpx;
		background: $cute-gradient-accent;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		font-weight: bold;
		color: $cute-text-inverse;
		margin-right: 25rpx;
		box-shadow: $cute-button-shadow;
		transition: $cute-transition;
		
		&:hover {
			transform: scale(1.1) rotate(5deg);
		}
	}

	.category-info {
		flex: 1;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-right: 30rpx;
	}

	.category-name {
		font-size: 28rpx;
		color: $cute-text-primary;
		font-weight: 500;
	}

	.category-amount {
		font-size: 28rpx;
		color: $cute-text-primary;
		font-weight: bold;
	}

	.category-progress {
		display: flex;
		align-items: center;
		width: 200rpx;
	}

	.progress-bar {
		flex: 1;
		height: 8rpx;
		background: $cute-bg-tertiary;
		border-radius: 4rpx;
		margin-right: 20rpx;
		overflow: hidden;
	}

	.progress-fill {
		height: 100%;
		background: $cute-gradient-primary;
		border-radius: 4rpx;
		transition: width 0.8s ease;
	}

	.progress-text {
		font-size: 24rpx;
		color: $cute-text-tertiary;
		min-width: 60rpx;
	}

	.empty-categories {
		text-align: center;
		padding: 80rpx 0;
		color: $cute-text-tertiary;
	}

	.empty-icon {
		font-size: 80rpx;
		margin-bottom: 20rpx;
		opacity: 0.5;
	}

	.empty-text {
		font-size: 28rpx;
		margin-bottom: 15rpx;
		color: $cute-text-secondary;
	}

	.empty-hint {
		font-size: 24rpx;
		color: $cute-text-tertiary;
		line-height: 1.5;
	}

	.pie-chart-container {
		width: 400rpx;
		height: 400rpx;
		position: relative;
		border-radius: 50%;
		overflow: hidden;
		margin: 0 auto 40rpx;
		box-shadow: $cute-card-shadow;
	}

	.pie-chart-wrapper {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
	}

	.pie-slice {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		transform-origin: center;
	}

	.pie-center {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background: $cute-bg-primary;
		border-radius: 50%;
		width: 60%;
		height: 60%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		box-shadow: inset 0 0 15rpx rgba(0, 0, 0, 0.1);
	}

	.pie-total {
		font-size: 36rpx;
		font-weight: bold;
		color: $cute-text-primary;
		margin-bottom: 10rpx;
	}

	.pie-label {
		font-size: 24rpx;
		color: $cute-text-secondary;
	}

	.chart-legend {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 20rpx 30rpx;
		margin-top: 40rpx;
	}

	.legend-item {
		display: flex;
		align-items: center;
	}

	.legend-color {
		width: 20rpx;
		height: 20rpx;
		border-radius: 4rpx;
		margin-right: 15rpx;
	}

	.legend-name {
		font-size: 26rpx;
		color: $cute-text-primary;
		margin-right: 10rpx;
	}

	.legend-percentage {
		font-size: 26rpx;
		color: $cute-text-secondary;
		font-weight: bold;
	}

	.empty-chart {
		text-align: center;
		padding: 80rpx 0;
		color: $cute-text-tertiary;
		font-size: 28rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.empty-chart .empty-icon {
		font-size: 80rpx;
		margin-bottom: 20rpx;
		opacity: 0.5;
	}

	.empty-chart .empty-text {
		font-size: 28rpx;
		margin-bottom: 15rpx;
		color: $cute-text-secondary;
	}

	.empty-chart .empty-hint {
		font-size: 24rpx;
		color: $cute-text-tertiary;
		line-height: 1.5;
	}

	/* 排行榜 */
	.ranking-section {
		background: $cute-bg-secondary;
		margin: 20rpx;
		border-radius: $cute-border-radius;
		padding: 30rpx;
		box-shadow: $cute-card-shadow;
		border: 2rpx solid $cute-border;
		margin-bottom: 40rpx;
	}

	.ranking-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
	}

	.ranking-title {
		font-size: 32rpx;
		font-weight: bold;
		color: $cute-text-primary;
	}

	.ranking-toggle {
		background: $cute-accent;
		color: $cute-text-inverse;
		border: none;
		border-radius: 20rpx;
		padding: 15rpx 25rpx;
		font-size: 24rpx;
		font-weight: 600;
		box-shadow: $cute-button-shadow;
		transition: $cute-transition;
		
		&:active {
			transform: $cute-active-transform;
			box-shadow: 0 4rpx 16rpx rgba(255, 182, 193, 0.4);
		}
	}

	.ranking-item {
		display: flex;
		align-items: center;
		padding: 25rpx 0;
		border-bottom: 2rpx solid $cute-divider;
		transition: $cute-transition;
		
		&:last-child {
			border-bottom: none;
		}
		
		&:hover {
			background: $cute-bg-tertiary;
			border-radius: 20rpx;
			padding: 25rpx 15rpx;
			margin: 0 -15rpx;
			transform: $cute-hover-transform;
		}
	}

	.ranking-number {
		width: 60rpx;
		height: 60rpx;
		background: $cute-bg-tertiary;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		font-weight: bold;
		color: $cute-text-secondary;
		margin-right: 25rpx;
	}

	.ranking-info {
		flex: 1;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-right: 30rpx;
	}

	.ranking-name {
		font-size: 28rpx;
		color: $cute-text-primary;
		font-weight: 500;
	}

	.ranking-amount {
		font-size: 28rpx;
		color: $cute-text-primary;
		font-weight: bold;
	}

	.ranking-bar {
		width: 120rpx;
		height: 8rpx;
		background: $cute-bg-tertiary;
		border-radius: 4rpx;
		overflow: hidden;
	}

	.ranking-fill {
		height: 100%;
		border-radius: 4rpx;
		transition: width 0.8s ease;
		transform-origin: left;
		background: $cute-gradient-primary;
	}

	.empty-ranking {
		text-align: center;
		padding: 80rpx 0;
		color: $cute-text-tertiary;
		font-size: 28rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.empty-ranking .empty-icon {
		font-size: 80rpx;
		margin-bottom: 20rpx;
		opacity: 0.5;
	}

	.empty-ranking .empty-text {
		font-size: 28rpx;
		margin-bottom: 15rpx;
		color: $cute-text-secondary;
	}

	.empty-ranking .empty-hint {
		font-size: 24rpx;
		color: $cute-text-tertiary;
		line-height: 1.5;
	}

	/* 快速添加按钮 */
	.fab-button {
		position: fixed;
		bottom: 20%;
		right: 40rpx;
		width: 100rpx;
		height: 100rpx;
		background: $cute-gradient-accent;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: $cute-button-shadow;
		z-index: 99;
		transition: $cute-transition;
		overflow: hidden;
		
		&::before {
			content: '';
			position: absolute;
			top: 0;
			left: -100%;
			width: 100%;
			height: 100%;
			background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
			transition: left 0.5s;
		}
		
		&:active {
			transform: $cute-active-transform;
			box-shadow: 0 4rpx 16rpx rgba(255, 182, 193, 0.4);
			
			&::before {
				left: 100%;
			}
		}
	}

	.fab-icon {
		font-size: 50rpx;
		color: $cute-text-inverse;
		font-weight: bold;
	}
</style>
